<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://unpkg.com/vue"></script>  0000
<script type="text/x-template" id="mycomp">
    <span>
        <div>总共{{total}}个事项,已完成{{done}}个事项，未完成{{total-done}}个事项</div>
        </span>
    </script>
<script>
    window.onload= function () {


        Vue.component("todoWord",{
            props:['total','done'],
            template:'#mycomp'
        })

        var app4 = new Vue({
            el: '#app4',
            methods: {
                add: function () {
                    this.todos.push({name: this.thing, done: false})
                },
                swit: function (index) {
                    this.todos[index].done = !this.todos[index].done;
                },
            },
                      computed:{
                          done: function () {
                              var count=0;
                              for(var i=0;i<this.todos.length;i++){
                                  if(this.todos[i].done){
                                      count++;
                                  }
                              }
                              return count;
                          }
                      },

            data: {
                thing: null,
                todos: [
                    {name: "吃饭", done: false},
                    {name: "睡觉", done: false},
                    {name: "篮球", done: true},
                ]



            }});
    }


</script>
<style>
    .del{text-decoration:line-through}</style>
</head>
<body>

<div id="app4">
    <input type="text" v-model="thing" v-on:keyup.enter="add">
    <button v-on:click="add">添加</button>
    <div v-for="(todo,index) in todos">

        <input type="checkbox" v-bind:checked="todo.done" v-on:click="swit(index)">{{index}}
   <span v-bind:class="{del:todo.done}">
            {{todo.name}}
        </span>

</div>
   <todo-word :total="todos.length" :done="done"></todo-word>

</div>
</body>
</html>